<template>
  <div class="task-files" v-if="files">
    <el-table ref="tableRef" :data="files" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="文件名">
        <template #default="scope">
          <span class="name">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="拓展名" width="80">
        <template #default="scope">
          {{ scope.row.extension }}
        </template>
      </el-table-column>

      <el-table-column v-if="mode === 'DETAIL'" :label="`%`" align="right" width="50">
        <template #default="scope">{{ calcProgress(scope.row.length, scope.row.completedLength, 1) }}</template>
      </el-table-column>
      <el-table-column v-if="mode === 'DETAIL'" :label="`✓`" align="right" width="85">
        <template #default="scope">{{ bytesToSize(scope.row.completedLength) }}</template>
      </el-table-column>
      <el-table-column label="文件大小" align="right" width="85">
        <template #default="scope">{{ bytesToSize(scope.row.length) }}</template>
      </el-table-column>
    </el-table>
    <el-row class="file-filters" :gutter="12">
      <el-col class="quick-filters" :xs="24" :sm="8" :md="8" :lg="8">
        <el-button-group>
          <el-button @click="toggleVideoSelection()">
            <el-icon size="12">
              <VideoPlay />
            </el-icon>
          </el-button>
          <el-button @click="toggleAudioSelection()">
            <el-icon size="12">
              <Mic />
            </el-icon>
          </el-button>
          <el-button @click="toggleImageSelection()">
            <el-icon size="12">
              <Picture />
            </el-icon>
          </el-button>
          <el-button @click="toggleDocumentSelection()">
            <el-icon size="12">
              <Document />
            </el-icon>
          </el-button>
        </el-button-group>
      </el-col>
      <el-col class="files-summary" :xs="24" :sm="16" :md="16" :lg="16">
        {{ `已选${selectedFilesCount}文件，共${selectedFilesTotalSize}` }}
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useConfigStore } from "@/store/configStore";
const configStore = useConfigStore();
const {
  NONE_SELECTED_FILES,
  SELECTED_ALL_FILES
} = configStore.baseConfig;
import {
  bytesToSize,
  calcProgress,
  filterAudioFiles,
  filterDocumentFiles,
  filterImageFiles,
  filterVideoFiles,
  removeExtensionDot
} from '@/utils/index.js'
import { computed, ref, watch } from "vue";

const emit = defineEmits(["selectionChange"])
const props = defineProps({
  mode: {
    type: String,
    default: 'ADD',
    validator: function (value) {
      return ['ADD', 'DETAIL'].indexOf(value) !== -1
    }
  },
  height: {
    type: [Number, String]
  },
  files: {
    type: Array,
    default() {
      return []
    }
  },

})


const selectedFiles = ref([])

const selectedFilesCount = computed(() => selectedFiles.value.length)

const selectedFilesTotalSize = computed(() => {
  const res = selectedFiles.value.reduce((a, c) => {
    return a + parseInt(c.length, 10)
  }, 0)
  return bytesToSize(res)
})

const selectedFileIndex = computed(() => {
  if (props.files.length === 0 || selectedFiles.value.length === 0) {
    return NONE_SELECTED_FILES
  }
  if (props.files.length === selectedFiles.value.length) {
    return SELECTED_ALL_FILES
  }
  const indexArr = selectedFiles.value.map(item => item.idx);
  const result = indexArr.join(',')
  return result
})

watch(selectedFileIndex, (val) => {
  console.log('selectedFileIndex', val)
  emit("selectionChange", val)
})

const tableRef = ref()
const toggleAllSelection = () => {
  tableRef.value.toggleAllSelection()
}

const handleSelectionChange = (val)=>{
  selectedFiles.value = val
}

defineExpose({
  toggleAllSelection
})
</script>

<style lang="scss" scoped>
.task-files {
  width: 100%;
}

.name {
  word-wrap: break-word;
  word-break: break-all;
}

.file-filters {
  margin-top: 10px;

  .files-summary {
    text-align: right;
  }
}
</style>